<template>
  <div class='ele-body ele-body-card'>
    <!-- 顶部卡片 -->
    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <div class='ele-cell workplace-user-card'>
        <div class='ele-cell-content ele-cell'>
          <a-progress :width='70' type='circle' :percent='100' :format="() => '主板'" />
          <div class='ele-cell-content'>
            <h4 class='ele-elip'>设备号：{{ data.recordId }}</h4>
            <div class='ele-elip ele-text-secondary'>
              <border-outer-outlined />
              <em>主板ID:{{ mainboardinfo.mainId }}</em>
            </div>
          </div>
        </div>
      </div>
    </a-card>

    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <a-form
        ref='cmdFormRef'
        :model='cmdFormModel'
        :rules="cmdFormRules"
        :label-col='{ md: { span: 7 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 17 }, sm: { span: 24 } }'
        @submit='pushCmd'
      >
        <a-row :gutter='8'>
          <a-col :md='10' :sm='24' :xs='24'>
            <a-form-item label='命令类型:' name='cmd'>
              <a-select v-model:value="cmdFormModel.cmd">
                <a-select-option :value="161">查询</a-select-option>
                <a-select-option :value="162">修改强起温度</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24' />
        </a-row>
        <a-row :gutter='8'>
          <a-col :md='10' :sm='24' :xs='24'>
            <a-form-item label='温度:' name='wendu'>
              <a-input v-model:value='cmdFormModel.wendu' placeholder='请输入温度' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-button type='primary' html-type='submit' :loading='cmdFormRefLoading'>
              提交
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import {BorderOuterOutlined} from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
import { DeviceSpraymainboardApi } from '@/api/property/DeviceSpraymainboardApi'
import { DeviceSpraymainboardCmdApi } from '@/api/property/DeviceSpraymainboardCmdApi';

export default {
  name: 'DeviceSpraymainboardCmdConfig',
  components: {
    BorderOuterOutlined
  },
  props: {
    data: Object
  },
  async created() {
    await this.init();
  },
  data() {
    return {
      loading : false,
      mainboardinfo : {},

      cmdFormModel: {},
      cmdFormRules : {},
      cmdFormRefLoading: false,
      cmdFormRefTimer : undefined,
    };
  },
  methods: {
    async init() {
      this.mainboardinfo = await DeviceSpraymainboardApi.detailByRecord(this.data.recordId);
    },
    clearCmdFormRef(){
      this.cmdFormRefLoading = false;
      clearInterval(this.cmdFormRefTimer);
    },
    checkProcess(type, clearCallback, callback) {
      let params = {
        recordId: this.data.recordId,
        mainId : this.mainboardinfo.mainId,
        cmd: type
      };
      let result = DeviceSpraymainboardCmdApi.workingDetail(params);
      result
        .then(result => {
          if (!result || !result.dscId) { //处理完成了
            clearCallback && clearCallback(); //去掉菊花+清除循环调用
            callback && callback(); //用户自定义
          }
        })
        .catch(() => {
          clearCallback && clearCallback(); //去掉菊花+清除循环调用
        });
    },
    checkCmd(){
      let that = this;
      this.checkProcess(this.cmdFormModel.cmd, this.clearCmdFormRef, function(){
        that.cmdFormModel.cmd = undefined;
        that.cmdFormModel.wendu = undefined;
      });
    },
    pushCmd() {
      if (!this.cmdFormModel.cmd) {
        message.error('请先选择命令');
        return;
      }
      if (this.cmdFormModel.cmd == 162 && !this.cmdFormModel.wendu) {
        message.error('请先填写时间');
        return;
      }
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        mainId : this.mainboardinfo.mainId,
        cmd : this.cmdFormModel.cmd,
        extend : JSON.stringify({temperature : this.cmdFormModel.wendu}),
      };
      let result = DeviceSpraymainboardCmdApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.cmdFormRefLoading = true; //转圈
          this.cmdFormRefTimer = setInterval(this.checkCmd, 5000);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
</style>
